﻿@model RoomM.Models.Rooms.RoomCalendar

@{
    ViewBag.Title = "Create";

    ViewBag.TimeLine = new String[] 
        { "", "Tiết 1: 7h - 7h50", "Tiết 2: 7h50 - 8h40", "Tiết 3: 9h - 9h50", 
            "Tiết 4: 9h50 - 10h40", "Tiết 5: 10h40 - 11h30", "Tiết 6: 12h - 12h50", 
            "Tiết 7: 12h50 - 1h40", "Tiết 8: 2h - 2h50", "Tiết 9: 2h50 - 3h40", 
            "Tiết 10: 3h40 - 4h30", "Tiết 11: 5h - 5h50", "Tiết 12: 5h50 - 6h40", 
            "Tiết 13: 6h40 - 7h30" };
}

@section styles {
    <link href="@Url.Content("~/Content/css/timetable.css")" rel="stylesheet"/>
}

<h2 id="title"></h2>

<fieldset>
    <legend>RoomCalendar</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.RoomId)
    </div>
    <div class="editor-field">
        @Html.DropDownList("RoomId")
        @Html.ValidationMessageFor(model => model.RoomId)
    </div>
    <div class="both"></div>
</fieldset>


<div class="float-right">
    <p class="float-left timeline">Từ ngày <b id="startDay">@ViewBag.StartDay</b> đến ngày <b id="endDay">@ViewBag.EndDay</b></p>
    <input type="button" id="btnPrev" value="Trước" class="float-left asbestos-flat-button" />

    <input type="button" id="btnNext" value="Tiếp" class="float-left asbestos-flat-button" />
</div>
<table width="90%" align="center" id="timetable">
    <div id="head_nav">
        <tr>
            <th class="wide">
            Tiết/ Thời gian</t>
            <th>Thứ 2</th>
            <th>Thứ 3</th>
            <th>Thứ 4</th>
            <th>Thứ 5</th>
            <th>Thứ 6</th>
            <th>Thứ 7</th>
            <th>Chủ nhật</th>
        </tr>
    </div>

    @for (int i = 1; i <= 13; ++i)
    {
        <tr>
            <th class="wide">@ViewBag.TimeLine[i]</th>
            @for (int j = 1; j <= 7; ++j)
            {
                if (ViewBag.TimeTbl[i][j] == 0)
                {
                    <td class="free" title="Có thể đăng kí"></td>
                }
                else if (ViewBag.TimeTbl[i][j] == 1)
                { 
                     <td class="wait" title="Đợi xác nhận"></td>
                }
                else
                {
                    <td class="setup" title="Không thể đăng kí"></td>
                }
            }
        </tr>
    }

</table>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            // const define
            var TIME_LINE = [
                    "", "Tiết 1: 7h - 7h50", "Tiết 2: 7h50 - 8h40", "Tiết 3: 9h - 9h50",
                    "Tiết 4: 9h50 - 10h40", "Tiết 5: 10h40 - 11h30", "Tiết 6: 12h - 12h50",
                    "Tiết 7: 12h50 - 1h40", "Tiết 8: 2h - 2h50", "Tiết 9: 2h50 - 3h40",
                    "Tiết 10: 3h40 - 4h30", "Tiết 11: 5h - 5h50", "Tiết 12: 5h50 - 6h40",
                    "Tiết 13: 6h40 - 7h30"];


            function buildLenghSelector(maxFree) {
                var opsForLength = "";
                for (var i = 1; i <= maxFree; ++i) {
                    opsForLength += '<option value="' + i + '">' + i + '</option>';
                }

                $("#Length").html(opsForLength);
            }

            function buildTimeTable(timeTbl) {
                var contentTbl =
                    "<div id='head_nav'><tr>"
                    + "<th class='wide'>Tiết/ Thời gian</th>"
                    + "<th>Thứ 2</th>"
                    + "<th>Thứ 3</th>"
                    + "<th>Thứ 4</th>"
                    + "<th>Thứ 5</th>"
                    + "<th>Thứ 6</th>"
                    + "<th>Thứ 7</th>"
                    + "<th>Chủ nhật</th></tr></div>";

                for (var i = 1; i <= 13; ++i) {
                    var row = "<tr><th class='wide'>" + TIME_LINE[i] + "</th>";
                    for (var j = 1; j <= 7; ++j) {
                        // console.log(timeTbl[i][j]);

                        if (timeTbl[i][j] == 0)
                            row += "<td class='free' title='Có thể đăng kí'></td>";
                        else if (timeTbl[i][j] == 1)
                            row += "<td class='wait' title='Đợi xác nhận'></td>";
                        else
                            row += "<td class='setup' title='Không thể đăng kí'></td>";
                    }

                    row += "</tr>";
                    contentTbl += row;
                }



                $('#timetable').html(contentTbl);
            }


            // get day from dd/mm/yyyy format
            function getDateFormat(day) {
                var dayOl = day.split("/");
                return new Date(dayOl[2], dayOl[1] - 1, dayOl[0]);
            }

            function getDateValueForDataComponent(now) {
                var day = ("0" + now.getDate()).slice(-2);
                var month = ("0" + (now.getMonth() + 1)).slice(-2);
                return now.getFullYear() + "-" + (month) + "-" + (day);
            }

            function updatePage(date, roomId) {
                // var date = new Date($('#Date').val());
                var day = ("0" + date.getDate()).slice(-2);
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var year = (date.getFullYear());

                console.log(day + " # " + month + " # " + year + " # " + roomId);

                $.post("/RoomRegister/ChangeSelect", { "day": day, "month": month, "year": year, "roomId": roomId },
                    function (data, status) {
                        console.debug(data);
                        // $("#checktime").html(data.StartList[0].Value + "#status " + status);

                        var opsForLength = "";

                        $.each(data.StartList, function (i, val) {
                            opsForLength += '<option value="' + val.ID + '">' + val.Value + '</option>';
                        });

                    
                        // build time table
                        buildTimeTable(data.TimeTableList);

                        // update start and end day
                        $('#startDay').html(data.StartDay);
                        $('#endDay').html(data.EndDay);

                    });
            }

            $('#btnPrev').click(function () {
                var day = getDateFormat($('#startDay').html());
                var prevDay = new Date(day);
                prevDay.setDate(day.getDate() - 7);

                var roomId = $('#RoomId').val();

                console.log($('#startDay').html());

                updatePage(prevDay, roomId);

            });

            $('#btnNext').click(function () {
                var day = getDateFormat($('#endDay').html());
                var nextDay = new Date(day);
                console.log("pre " + day);
                nextDay.setDate(day.getDate() + 1);

                console.log("aft " + nextDay);

                var roomId = $('#RoomId').val();
                updatePage(nextDay, roomId);

            });

            $('#RoomId').change(function () {
                var date = getDateFormat($('#endDay').html());
                var roomId = $(this).val();
                updatePage(date, roomId);

                // update title
                $('#title').html('Thời gian biểu của phòng ' + $('#RoomId option:selected').text());
            });

            // set title
            $('#title').html('Thời gian biểu của phòng ' + $('#RoomId option:selected').text());

        });
    </script>
}



